import React from 'react'
import { useLayoutEffect } from 'react'
import { useState, useEffect } from 'react'

export default function App() {
    // useEffect(() => {
    //     //可以发送请求axios
    // }, []) //空数组代表 不依赖state值 只执行一次

    const [name, setname] = useState("lyz")

    useLayoutEffect(()=>{
        //作用和useEffect一样,只是触发时机不同;
        //useLayoutEffect 和 原来的componentDidMount & componentDidUpadate一致,会在react DOM更新后马上同步调用,会阻塞页面渲染;如果需要修改dom可以在这里执行
        //useEffect会在整个页面渲染完在执行;官方优先建议使用useEffect
    },[])

    useEffect(() => {
        setname(name.substring(0, 1).toUpperCase() + name.substring(1))
        // return ()=>{
        //     //没有依赖时 组件销毁时执行  有依赖时 会在组件更新和销毁时执行
        //     console.log("组件销毁");
        // }
    }, [name])  //传值代表依赖于这个值来执行useeffect函数,类似vue的computed

    return (
        <div>
            <button onClick={() => setname("tyy")}>click</button>
            <div>App--{name}</div>
        </div>
    )
}
